<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>诛仙手游炼器模拟器</title>
    <link rel="stylesheet" href="assets/css/H-ui.reset.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script type="text/javascript" src="assets/js/vue.min.js"></script>
</head>
<body>

<div id="app">
    <!-- 主背景 -->
    <img src="assets/img/bg.png" alt="" width="100%" height="100%">

    <!-- 装备列表 -->
    <div class="zb-list-container">
        <ul class="zb-list">
            <li v-for="(item,index) in zbList" @click="zbActiveIndex=index" :class="{active:index==zbActiveIndex}">
                <img :src="'assets/img/'+item.img" alt="">
                <p class="p1">{{item.name}}</p>
                <p class="p2" :lqdj="item.lqdj" >炼器+{{item.lqdj}}</p>
            </li>
        </ul>
    </div>

    <!-- 当前选中装备标识图片 -->
    <img class="curr-zb-img" :src="currZbImg" alt="">

    <!-- 开始炼器按钮 -->
    <div class="start-btn" @click="startLq" ></div>

    <!-- 炼器成功效果 （成功时显示） -->
    <div class="lqcg animated zoomIn" v-show="lqjg==1"></div>

    <!-- 炼器失败效果 （失败时显示）-->
    <div class="lqsb animated zoomIn" v-show="lqjg==0"></div>

    <!-- 炼器符数量 -->
    <strong class="lqfnum">{{lqfNum}}/1</strong>

    <!-- 祝福道具显示按钮 -->
    <div class="zfdj-show-btn" @click="zfdjShow=true">
        <img :src="'assets/img/'+zfdjList[zfdjActiveIndex].img" alt="" v-if="zfdjActiveIndex!=-1" width="100%" height="100%">
        <strong v-if="zfdjActiveIndex!=-1">{{zfdjList[zfdjActiveIndex].num}}</strong>
    </div>

    <!-- 是否使用祝福道具钩子 -->
    <div class="hook zfdj-hook" :class="{active:zfdjUse}" @click="zfdjUse=!zfdjUse"></div>

    <!-- 祝福道具选择区（默认隐藏） -->
    <div class="zfdj-box" v-show="zfdjShow">
        <ul class="zfdj-list">
            <li v-for="(item,index) in zfdjList" v-show="item.num" :class="{active:index==zfdjActiveIndex}" @click="zfdjActiveIndex=index">
                <img :src="'assets/img/'+item.img" alt="">
                <strong>{{item.num}}</strong>
            </li>
        </ul>
        <div class="zfdj-desc" v-html="zfdjDesc"></div>
        <div class="zfdj-confirm-btn" @click="zfdjShow=false"></div>
    </div>



    <!-- 自动炼器按钮 -->
    <div class="zdlq-show-btn" @click="zdlqShow=zdlqStatus==0||stopZdlq()">{{zdlqStatus?"停止炼器":"自动炼器"}}</div>

    <!-- 自动炼器设置（默认隐藏） -->
    <div class="zdlq-box" v-show="zdlqShow">
        <div class="zdlq-uplimit-select" >
            <span>{{zdlqUpLimitSelect}}</span>
            <select name="zdlqUpLimit" v-model="zdlqUpLimitSelect">
                <option v-for="item in zdlqUpLimitList" :value="item">{{item}}</option>
            </select>
        </div>

        <!-- 钩选1（是否自动消耗金币） -->
        <div class="hook zdlq-first-hook" :class="{active:zdlqUse1}" @click="zdlqUse1=!zdlqUse1"></div>
        <!-- 钩选2（是否自动选择更高级别完璧符）-->
        <div class="hook zdlq-second-hook" :class="{active:zdlqUse2}" @click="zdlqUse2=!zdlqUse2"></div>
        <!-- 钩选3（是否使用祝福道具） -->
        <div class="hook zdlq-three-hook" :class="{active:zfdjUse}" @click="zfdjUse=!zfdjUse"></div>
        <!-- 祝福道具列表 -->
        <ul class="zdlq-zfdj-list">
            <li v-for="(item,index) in zfdjList" v-show="item.num" :class="{active:zfdjUse && index==zfdjActiveIndex}" @click="zfdjActiveIndex=index">
                <img :src="'assets/img/'+item.img" alt="" :class="{'gray-img': !zfdjUse }">
                <strong>{{item.num}}</strong>
                <p>{{item.name}}</p>
            </li>
        </ul>

        <div class="zdlq-cancel" @click="zdlqShow=false"></div>
        <div class="zdlq-confirm" @click="zdlqShow=false;startZdlq();"></div>
    </div>

    <!-- 消耗总计 -->
    <p class="total">总计：<strong>{{total}}</strong>元宝</p>

</div>

<script type="text/javascript">


    /**
     * 各等级装备炼器概率常量
     * 此处概率参考来源： http://pgp.wanmei.com/gongshi/m_zhuxian.html
     * @type {Object}
     */
    const lqglList = {
        100:[0.6,0.6,0.6,0.6,0.6,0.55,0.55,0.45,0.45,0.35,0.35,0.3,0.35,0.35,0.3]
    };

    /**
     * 随机炼器buff，模拟官网公示的概率都是 “大于30%” 的情况
     * @type {[type]}
     */
    const lqBuff = 1.1+Math.random()*0.15;

    /**
     * 装备列表
     * @type {Array}
     */
    var zbList = [
        {name:"华月环(100级)",img:'zb01.png',zbdj:100,lqdj:0},
        {name:"华月冠(100级)",img:'zb02.png',zbdj:100,lqdj:0},
        {name:"华月衫(100级)",img:'zb03.png',zbdj:100,lqdj:0},
        {name:"华月裤(100级)",img:'zb04.png',zbdj:100,lqdj:0},
        {name:"华月手(100级)",img:'zb05.png',zbdj:100,lqdj:0},
        {name:"华月鞋(100级)",img:'zb06.png',zbdj:100,lqdj:0}
    ];

    /**
     * 祝福道具列表
     * @type {Array}
     */
    var zfdjList = [
        {name:"吉星符", num:5000, img:'jxf.png', price:200, lqsb:-5, lqBuff:1.2, desc:'使炼器成功的概率提高<font color="red">20%</font>，炼器成功可提高1级炼器等级，失败则降低<font color="red">5</font>级，但最少会保留至1级'},
        {name:"神品完璧符", num:5000, img:'wbf.png', price:200, lqsb:-1, lqBuff:1, desc:'适用于所有装备，使炼器失败的惩罚减少为降低<font color="red">1</font>级炼器等级'},
        {name:"天缘符", num:500, img:'tyf.png', price:1960, lqsb:-1, lqBuff:1.2, desc:'使炼器失败的惩罚减少为降低<font color="red">1</font>级炼器等级，同时炼器成功率提高<font color="red">20%</font>'}
    ]

    /**
     * 创建vue实例
     */
    var app = new Vue({
        el:"#app",
        data:{
            total:0,
            lqjg:-1,//炼器结果：-1执行中，0炼器失败，1炼器成功
            interval:400,//时间间隔，限定单次执行时长，单位毫秒
            lqfNum:99999,//炼器符数量
            zbActiveIndex:0,//当前激活装备下标
            zbList:zbList,//装备列表
            zfdjActiveIndex:-1,//当前激活祝福道具下标
            zfdjShow:false,//祝福道具选择框是否显示（默认隐藏）
            zfdjUse:true,//祝福道具是否使用（默认使用）
            zfdjList:zfdjList,//祝福道具列表
            zdlqShow:false,//自动炼器定时器
            zdlqSt:null,//自动炼器定时器
            zdlqUse1:true,//自动炼器功能勾选1
            zdlqUse2:true,//自动炼器功能勾选2
            zdlqUpLimitList:[4,5,6,7,8,9,10,11,12,13,14,15],//自动炼器上限等级列表
            zdlqUpLimitSelect:15,//自动炼器当前选择炼器等级上限
            zdlqStatus:0//自动炼器状态：0未执行，1执行中
        },
        methods:{
            //开始炼器（执行一次）
            startLq(){

                //提取当前装备信息
                var item = this.zbList[this.zbActiveIndex];

                //炼器执行中，操作取消
                if(this.lqjg!=-1) return;
                //炼器符用尽
                if(this.lqfNum==0 ) return alert("炼器符用尽！");
                //当前装备已达到最高等级，操作取消
                if(item.lqdj==15) return alert("已达到最高等级！");

                //基础炼器概率
                var lqgl = lqglList[item.zbdj][item.lqdj]*lqBuff;

                //炼器失败惩罚(默认减5级)
                var lqsb = -5;

                //炼器符使用，数量减一
                this.lqfNum--;
                this.total+=10;

                //祝福道具使用
                var zfdj = this.zfdjUse && this.zfdjActiveIndex!=-1 ? this.zfdjList[this.zfdjActiveIndex] : null;
                if(zfdj){
                    lqsb = zfdj.lqsb;
                    lqgl *= zfdj.lqBuff;
                    zfdj.num--;
                    this.total+=zfdj.price;
                    if(zfdj.num==0) this.zfdjActiveIndex=-1;
                }

                //炼器结果计算
                if(Math.random()<=lqgl){
                    this.lqjg=1;
                    item.lqdj++;
                }else{
                    item.lqdj=item.lqdj==0?0:item.lqdj+lqsb<1?1:item.lqdj+lqsb;
                    this.lqjg=0;
                }

                //设置超时，避免炼器过快
                setTimeout(function(){ this.lqjg=-1; }.bind(this),this.interval);
            },
            //自动炼器（执行多次）
            startZdlq(){
                this.zdlqStatus=1;
                this.zdlqSt=setInterval(function(){
                    //提取当前装备信息
                    var item = this.zbList[this.zbActiveIndex];
                    var max = this.zdlqUpLimitSelect;

                    if(item.lqdj>=max || (false && this.zfdjUse && this.zfdjActiveIndex==-1) ) return this.stopZdlq();

                    this.startLq();
                }.bind(this),this.interval+50);
            },
            //停止自动炼器
            stopZdlq(){
                 this.zdlqStatus=0;
                 clearInterval(this.zdlqSt);
            }
        },
        computed:{
            currZbImg(){
                return 'assets/img/'+this.zbList[this.zbActiveIndex].img;
            },
            zfdjDesc(){
                var zfdj = this.zfdjList[this.zfdjActiveIndex];
                return zfdj ? '<h3>'+zfdj.name+'</h3><p>'+zfdj.desc+'</p>' : '';
            }
        }
    });


    /**
     * 自适应
     */
    ;(function(){
        window.onresize = function (){
            var el = document.getElementById("app");
            var w=window.innerWidth-80, h=window.innerHeight-80;
            var w2=el.clientWidth, h2=el.clientHeight;
            //等比例缩放
            if(w>=h){
                let scale = Math.min(h/h2,w/w2);
                el.style.transform=`scale(${scale},${scale})`;
            }else{
                let scale = Math.min(h/w2,w/h2);
                el.style.transform=`rotate(90deg) scale(${scale},${scale})`;
            }
        };
        window.onresize();
    })();


</script>
</body>
</html>